@import '../../style/variable.scss';


.xxm-skeleton-ls{
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: $skeleton-padding;

  &__avatar {
    flex-shrink: 0;
    margin-right: $padding-md;
    background-color: $skeleton-avatar-background-color;

    &--round {
      border-radius: 100%;
    }
  }

  &__content {
    flex: 1;
  }

  &__avatar + &__content {
    padding-top: $padding-xs;
  }

  &__row,
  &__title {
    height: $skeleton-row-height;
    background-color: $skeleton-row-background-color;
  }

  &__title {
    margin: 0;
  }

  &__row {
    &:not(:first-child) {
      margin-top: $skeleton-row-margin-top;
    }
  }

  &__title + &__row {
    margin-top: 20px;
  }

  &--animate {
    animation: xxm-skeleton-blink $skeleton-animation-duration ease-in-out
      infinite;
  }
}


@keyframes xxm-skeleton-blink {
    50% {
      opacity: 0.6;
    }
  }